<template>
  <view class="container">
    <!--  标题栏  -->
    <view class="back-layout hor-layout">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <view class="back-title">课程列表</view>
      <view class="back-view" @click="addCourseClick">
        <i class="iconfont back-icon">&#xe622;</i>
      </view>
    </view>
    <view class="page-container">
      <view class="course-type hor-layout-center-all">
        <drop-down v-model="selectCateValue" :options="cateList" @change="refreshData"></drop-down>
      </view>
      <view class="course-list-view">
        <block v-if="courseList.length>0">
          <view v-for="(item,index) in courseList" :key="index" class="course-item hor-layout-center"
                @click="toCourseDetail(item)">
            <image class="course-image" :src="item.picture"/>
            <view class="course-content">
              <view class="title">{{ item.title }}</view>
              <view class="price">
                总课费:{{ item.sku_price }}
                <!--                <span class="discount"> (原价:6000)</span>-->
              </view>
              <view class="major">{{ item.major }}</view>
            </view>
            <view class="course-edit-btn">编辑</view>
          </view>
          <u-loadmore margin-top="15" v-if="loadingObj.status" :status="loadingObj.status"/>
        </block>
        <view v-else class="list-no-data">暂无数据</view>
      </view>
    </view>
  </view>
</template>

<script>
import {addCourse} from "@/router.js"
import {CourseListApi} from "@/api/courseList.js"
import DropDown from "@/components/drop-down/drop-down"

let engine = new CourseListApi()
export default {
  name: "courseList",
  components: {DropDown},
  data() {
    return {
      cateList: [{value: 'c1', label: '数据1'}, {value: 'c2', label: '数据2'}],
      courseList: [{}],
      showCateList: false,
      selectCateValue: undefined,
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  onLoad() {
    // this.getCourseCateList()
  },
  onReachBottom(e){
    console.log("onReachBottom", e)
    this.loadMore()
  },
  methods: {
    getCourseCateList() {
      engine.getCourseCateList().then(res => {
        let cateList = res.data.map(item => {
          return {value: item.id, label: item.title}
        })
        cateList.unshift({value: 0, label: '全部课程'})
        this.cateList = cateList
        this.selectCateValue = this.cateList[0].value
        this.refreshData()
      })
    },
    getCourseList() {
      engine.getCourseList({page: this.loadingObj.current, cate_id: this.selectCateValue}).then(res => {
        this.courseList = this.courseList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.courseList = []
      this.getCourseList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getCourseList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.courseList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
    navBack() {
      this.$u.route({type: 'back'})
    },
    addCourseClick() {
      this.$u.route({url: addCourse})
    },
    toCourseDetail(item) {
      this.$u.route({url: addCourse, params: item})
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.back-layout {
  position: fixed;
  width: 100%;
  z-index: 1000;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  line-height: 44px;
  font-size: 16px;
  background: #42B4AC;
}

.back-view {
  width: 44px;
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.back-title {
  flex: 1;
  color: white;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.course-type {
  z-index: 1000;
  position: fixed;
  margin: 0px auto;
  height: 40px;
  background: white;
  width: 100%;
  border-bottom: 1px solid #E4E4E4;
}

.course-type-title {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.down-icon {
  margin-left: 9px;
  color: #000000;
  font-weight: 500;
}

.course-list-view {
  margin-top: 40px;
}

.course-item {
  padding: 19px 0px;
  margin: 0px 12px;
  border-bottom: 1px solid #E5E5E5;
}

.course-image {
  width: 110px;
  height: 63px;
  background: #E5E5E5;
  border-radius: 5px;
}

.course-content {
  flex: 1;
  height: 100%;
  margin-left: 12px;
}

.course-content > .title {
  font-size: 15px;
  line-height: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}

.course-content > .price {
  margin-top: 10px;
  font-size: 10px;
  line-height: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FF1D1D;
}

.price > .discount {
  color: #333333;
  text-decoration: line-through;
}

.course-content > .major {
  margin-top: 10px;
  padding: 0px 10px;
  height: 16px;
  line-height: 16px;
  background: #FDC62D;
  border-radius: 8px;
  width: fit-content;
  /* 文本样式 */
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}

.course-edit-btn {
  width: 60px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  /* 文本样式 */
  border: 1px solid #42B4AB;
  border-radius: 12px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #42B4AB;
}

/deep/ .u-cell__value {
  display: none;
}

/deep/ .u-cell {
  justify-content: center;
}
</style>
